<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>大众点购</title>
    <!-- <script src="./static/js/login.js"></script> -->
    <style>
        #loading_init{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        background-color: rgba(0, 0, 0, 0.8);
    }
    #loading_init .text{
        width: 150px;
        height: 30px;
        color: #fff;
        font-size: 16px;
        position: absolute;
        z-index: 10004;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        line-height: 30px;
        letter-spacing: 2px;
        animation: fadein 3s linear infinite;
    }
    #loading_init .big-box{
        width: 220px;
        height: 220px;
        margin: auto;
        position: absolute;
        border: 0.2px solid rgba(255,255,255,0.1);
        border-radius: 50%;
        z-index: 10001;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        -webkit-animation: spin 2s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: spin 2.5s 0s linear infinite;
    }
    #loading_init .big-ring{
        width: 110px;
        height: 220px;
        border: 6px solid rgb(42,161,152);
        border-top-left-radius: 100% 50%;
        border-top-right-radius: 0px 50%;
        border-bottom-right-radius: 0px 50%;
        border-bottom-left-radius: 100% 50%;
        border-right: none;
        box-sizing: border-box;
    }

    #loading_init .small-box{
        width: 180px;
        height: 180px;
        border-radius: 50%;
        margin: auto;
        position: absolute;
        z-index: 10002;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        -webkit-animation: spin 2s 0s linear infinite;
        animation: spin 2s 0s linear infinite;
    }

    #loading_init .small-ring{
        width: 90px;
        height: 180px;
        border: 4px solid rgb(133, 153, 0);
        border-top-left-radius: 100% 50%;
        border-top-right-radius: 0px 50%;
        border-bottom-right-radius: 0px 50%;
        border-bottom-left-radius: 100% 50%;
        border-right: none;
        box-sizing: border-box;
    }

    #loading_init .mini-box{
        width: 160px;
        height: 160px;
        /* border: 0.2px solid rgba(255,255,255,0.1);
        border-radius: 50%; */
        margin: auto;
        position: absolute;
        z-index: 10003;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        -webkit-animation: spinRe 2s 0s linear infinite;
        animation: spinRe 2s 0s linear infinite;
    }

    #loading_init .mini-ring{
        width: 80px;
        height: 160px;
        border: 2px solid deepskyblue;
        border-top-left-radius: 100% 50%;
        border-top-right-radius: 0px 50%;
        border-bottom-right-radius: 0px 50%;
        border-bottom-left-radius: 100% 50%;
        border-right: none;
        box-sizing: border-box;
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spinRe {
        0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }
    @keyframes spinRe {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }

    @keyframes fadein{
        0%{opacity:0;}
        50%{opacity:1;}
        100%{opacity:0;}
    }
    </style>
</head>

<body>
    <div id="app">
        <div id="loading_init">
            <div class="big-box">
                <div class="big-ring"></div>
            </div>
    
            <div class="small-box">
                <div class="small-ring"></div>
            </div>
    
            <div class="mini-box">
                <div class="mini-ring"></div>
            </div>
    
            <div class="text">
                正在加载中
            </div>
        </div>
    </div>
    
    <!-- built files will be auto injected -->
    <script src="http://pv.sohu.com/cityjson"></script>
</body>

</html>
